<template>
    <div class="chart-container">
      <h2 class="chart-title">电脑可视化展示</h2>
      <a-button type="primary" @click="handleGoHome" style="margin-right: 16px">主界面</a-button>
      <div class="chart-row">
        <div ref="barChart1" class="chart"></div>
        <div ref="barChart2" class="chart"></div>
      </div>
      <div class="chart-row">
        <div ref="lineChart" class="chart"></div>
        <div ref="pieChart" class="chart"></div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import * as echarts from 'echarts';
  import 'echarts-wordcloud';
  export default {
  data() {
    return {
      barChart1Instance: null,
      barChart2Instance: null,
      lineChartInstance: null,
      pieChartInstance: null
    };
  },
  mounted() {
    this.renderCharts();
  },
  methods: {
    renderCharts() {
      this.barChart1Instance = echarts.init(this.$refs.barChart1);
      this.wordCloudChartInstance = echarts.init(this.$refs.barChart2);
      this.lineChartInstance = echarts.init(this.$refs.lineChart);
      this.pieChartInstance = echarts.init(this.$refs.pieChart);

      // 模拟数据
      const count = [49, 670, 478, 184, 171, 136, 285, 49, 30, 34, 35, 60];
      const shopFreq = [
        { 'name': '联想', 'value': 307 },
        { 'name': '惠普', 'value': 202 },
        { 'name': '华硕', 'value': 187 },
        { 'name': '戴尔', 'value': 141 },
        { 'name': '华为', 'value': 110 },
        { 'name': '机械革命', 'value': 107 },
        { 'name': 'ThinkPad', 'value': 92 },
        { 'name': '宏碁', 'value': 65 },
        { 'name': '神舟', 'value': 55 },
        { 'name': '七彩虹', 'value': 53 },
        { 'name': 'Apple', 'value': 83 },
        { 'name': 'AOC', 'value': 34 },
        { 'name': '机械师', 'value': 33 },
        { 'name': '微星', 'value': 32 },
        { 'name': '雷神', 'value': 31 },
        { 'name': 'ROG', 'value': 24 },
        { 'name': '攀升', 'value': 20 },
        { 'name': 'UIG', 'value': 17 },
      ];

      const barOptions1 = {
        title: {
          show: true,
          text: '处理器可视化',
          textAlign: 'center',
          left: '50%',
          top: 'bottom'
        },
        xAxis: {
          type: 'category',
          data: ['i3', 'i5', 'i7', 'i9', 'AMD R7', 'intel', 'AMD R5', 'AMD R9', 'Apple M1', 'Apple M2', '其他'],
          axisLabel: {
        rotate: -45 // 设置标签文字逆时针旋转 45 度显示
    }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: count.map(value => ({
            value: value,
            itemStyle: {
              color: 'rgb(51, 102, 204)' // 柱状图颜色
            }
          })),
          type: 'bar'
        }],
        grid: {
          containLabel: true,
          left: '10%',
          right: '10%',
          bottom: '10%',
          top: '10%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        }
      };
      this.barChart1Instance.setOption(barOptions1);
      const wordCloudOptions = {
        title: {
          show: true,
          text: '品牌频率词云图',
          textAlign: 'center', 
          left: '50%', // 标题水平居中
          top: 'bottom' 
        },
      series: [{
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: shopFreq
      }]
    };
    this.wordCloudChartInstance.setOption(wordCloudOptions);

      // 绘制折线图
      const lineOptions = {
        title: {
          show: true,
          text: '电脑价格折线图',
          textAlign: 'center', 
          left: '50%', // 标题水平居中
          top: 'bottom' 
        },
        xAxis: {
          type: 'category',
          data: ['3999', '4999', '5999', '6999', '7999', '8999', '10999', '12999', '+inf']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [624,255,348,263,211,117,137,39,93],
          type: 'line'
        }]
      };
      this.lineChartInstance.setOption(lineOptions);
      const pieOptions = {
  title: {
    show: true,
    text: '电脑类型比例',
    textAlign: 'center', 
    left: '50%', 
    top: 'bottom'
  },
  series: [{
    type: 'pie',
    data: [
    { 'value': 807, 'name': '笔记本' },
    { 'value': 526, 'name': '游戏本' },
    { 'value': 485, 'name': '台式机' },
    { 'value': 181, 'name': '一体机' },
    { 'value': 54, 'name': '组装电脑' },
    { 'value': 13, 'name': '二手台式机' },
    { 'value': 11, 'name': '服务器' },
    { 'value': 8, 'name': '二手笔记本' },
    { 'value': 1, 'name': '平板电脑' },
    ]
  }],
  tooltip: {
    trigger: 'item', // 触发方式为项数据触发
    formatter: '{a} <br/>{b}: {c} ({d}%)' // 提示信息格式化
  }
};
this.pieChartInstance.setOption(pieOptions);


    },
    handleGoHome() {
      this.$router.push('/home');
  }
  }
  
};

  </script>
  
  <style>
  .chart-container {
    width: 90vw;
	height: 100vh;
    background-image: url('/assets/image/filebg.jpg'); 
    background-size: cover;
    padding: 20px;
  }
  
  .chart-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  
  .chart {
  width: 48%;
  height: 300px;
  background-color: white;
}
.el-select__placeholder {
  width: 200px;
  margin: 0 auto;
}

</style>

